<.focus_box>
  <:title>
    Confirm new subscription plan
  </:title>

  <div class="text-lg font-bold dark:text-gray-100">Due now</div>
  <div class="block text-gray-500 dark:text-gray-200 text-sm">
    Your card will be charged a pro-rated amount for the current billing period
  </div>

  <div class="flex flex-col mt-4">
    <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
      <div class="align-middle inline-block min-w-full shadow-sm overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none">
        <table class="min-w-full">
          <thead>
            <tr>
              <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
                Amount
              </th>
              <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
                Date
              </th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-200">
              <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">
                {present_currency(@preview_info["immediate_payment"]["currency"])}{@preview_info[
                  "immediate_payment"
                ]["amount"]}
              </td>
              <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100">
                {present_date(@preview_info["immediate_payment"]["date"])}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="pt-6"></div>

  <div class="py-4 dark:text-gray-100 text-lg font-bold">Next payment</div>

  <div class="flex flex-col">
    <div class="-my-2 py-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
      <div class="align-middle inline-block min-w-full shadow-sm overflow-hidden sm:rounded-lg border-b border-gray-200 dark:border-t dark:border-l dark:border-r dark:shadow-none">
        <table class="min-w-full">
          <thead>
            <tr>
              <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
                Amount
              </th>
              <th class="px-6 py-3 border-b border-gray-200 bg-gray-100 dark:bg-gray-900 text-left text-xs leading-4 font-medium text-gray-500 dark:text-gray-200 uppercase tracking-wider">
                Date
              </th>
            </tr>
          </thead>
          <tbody class="bg-white dark:bg-gray-800">
            <tr class="border-b border-gray-200">
              <td class="px-6 py-4 text-sm leading-5 font-bold dark:text-gray-100">
                {present_currency(@preview_info["immediate_payment"]["currency"])}{@preview_info[
                  "next_payment"
                ]["amount"]}
              </td>
              <td class="px-6 py-4 text-sm leading-5 dark:text-gray-100">
                {present_date(@preview_info["next_payment"]["date"])}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="flex items-center justify-between mt-10">
    <span class="flex rounded-md shadow-xs">
      <a
        href={@back_link}
        type="button"
        class="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:text-gray-500 dark:hover:text-gray-200 focus:outline-hidden focus:border-blue-300 focus:ring active:text-gray-800 dark:active:text-gray-200 active:bg-gray-50 transition ease-in-out duration-150"
      >
        Back
      </a>
    </span>
    <span class="flex space-betwee rounded-md shadow-xs">
      <.button_link
        href={Routes.billing_path(@conn, :change_plan, @preview_info["plan_id"])}
        method="post"
      >
        Confirm plan change
      </.button_link>
    </span>
  </div>

  <div class="text-center mt-8 dark:text-gray-100">
    Questions? <.styled_link href="https://plausible.io/contact">Contact us</.styled_link>
  </div>
</.focus_box>
